<template>
  <el-dialog
    v-model="show"
    :title="formData.id ? '编辑模型厂商' : '添加模型厂商'"
    @close="handleClose"
    width="520px"
    :close-on-click-modal="false"
  >
    <div class="px-2">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="100px"
        class="space-y-6"
      >
        <div class="space-y-4">
          <el-form-item
            label="模型厂商"
            prop="name"
            :rules="[{ required: true, message: '请输入模型厂商名称', trigger: 'blur' }]"
          >
            <el-input
              v-model="formData.name"
              placeholder="请输入模型厂商名称"
              autocomplete="off"
            >
              <template #prefix>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item
            label="API密钥"
            prop="apikey"
            :rules="[{ required: true, message: '请输入API密钥', trigger: 'blur' }]"
          >
            <el-input
              v-model="formData.apikey"
              placeholder="请输入API密钥"
            >
              <template #prefix>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="备注信息" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              :rows="4"
              placeholder="请输入备注信息（可选）"
            >
              <template #prefix>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <template #footer>
      <div class="flex justify-end space-x-3 px-2">
        <el-button
          @click="handleClose"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          :loading="loading"
        >
          {{ formData.id ? '更新配置' : '添加配置' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { addManufacturerApi, updateManufacturerApi } from '@/api/ai'

const emit = defineEmits(['success'])
const show = ref(false)
const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive({
  id: '',
  name: '',
  apikey: '',
  remark: ''
})

const setFormData = (data: any) => {
  formData.id = data.id || ''
  formData.name = data.name || ''
  formData.apikey = data.apikey || ''
  formData.remark = data.remark || ''
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    if (formData.id) {
      await updateManufacturerApi(formData)
      ElMessage.success('更新成功')
    } else {
      await addManufacturerApi(formData)
      ElMessage.success('添加成功')
    }

    show.value = false
    emit('success')
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  show.value = false
  nextTick(() => {
    formRef.value?.resetFields()
    Object.assign(formData, {
      id: '',
      name: '',
      apikey: '',
      remark: ''
    })
  })
}

defineExpose({
  open(row: any) {
    show.value = true
    setFormData(row || {})
  }
})
</script>

<style scoped>

</style>
